<html>
    <head>
        <title>Mapping 38 years of excavation</title>
        <link rel="stylesheet" type="text/css" href="../scripts/MapFish-devel/client/mfbase/ext/resources/css/ext-all.css"/>
        <link rel="stylesheet" type="text/css" href="../scripts/MapFish-devel/client/mfbase/ext/resources/css/xtheme-gray.css"/>
        <script type="text/javascript" src="../scripts/OpenLayers-devel/lib/OpenLayers.js">
        </script>
        <script type="text/javascript" src="../scripts/MapFish-devel/client/mfbase/ext/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="../scripts/MapFish-devel/client/mfbase/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="../scripts/MapFish-devel/client/mfbase/mapfish/MapFish.js">
        </script>
        <script type="text/javascript" src="scripts/Printing.js">
        </script>
		<script type="text/javascript" src="scripts/Query.js">
		</script>
        <style type="text/css">
            html, body {
                font: normal 12px verdana;
                margin: 0;
                padding: 0;
                border: 0 none;
                overflow: hidden;
                height: 100%;
            }
        </style>
        <script type="text/javascript">

            // reference local blank image
            Ext.BLANK_IMAGE_URL = '../scripts/MapFish-devel/client/mfbase/ext/resources/images/default/s.gif';

            Ext.onReady(function(){
                Ext.state.Manager.setProvider(new Ext.state.CookieProvider());


                // *** Definition of the OpenLayers Map ***

            var bounds = new OpenLayers.Bounds(
                603000.2772586504, 200998.95447541235,
                603051.4741965039, 201046.42541753448
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.19998803849011892,
                projection: "EPSG:21781",
                units: 'm'
            };

                var map = new OpenLayers.Map($('olmap'), options);

                var gemeindegrenzen = new OpenLayers.Layer.WMS("Topography",
                "http://localhost:8080/geoserver/wms", {
                    srs: 'EPSG:21781',
                    layers: 'caa:isolines,caa:areas',
                    transparent: 'true',
                    format: 'image/png'
                }, {
                    singleTile: true
                });
                gemeindegrenzen.isBaseLayer = true;

                map.addLayers([gemeindegrenzen]);

                map.addControl(new OpenLayers.Control.PanZoomBar());
                map.addControl(new OpenLayers.Control.Navigation());
                //map.addControl(new OpenLayers.Control.Scale());
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                //map.addControl(new OpenLayers.Control.Permalink());

                map.zoomToExtent(bounds);
                //map.setCenter(new OpenLayers.LonLat(618500, 238500), 3, true, true);


				// *** ExtJS-Stuff ***

                var printing = new mapfish.widgets.Printing({
                    map: map
                });

                var queries = new mapfish.widgets.Query({
                    map: map
                });

                var viewport = new Ext.Viewport({
                    layout: 'border',
                    items: [new Ext.BoxComponent({ // raw
                        region: 'north',
                        margins: '5 5 5 5',
                        el: 'north',
                        height: 63
                    }),  {
                        region: 'west',
                        id: 'west-panel',
                        title: 'Operations',
                        split: true,
                        width: 300,
                        minSize: 175,
                        maxSize: 300,
                        collapsible: true,
                        margins: '0 0 0 5',
                        layout: 'anchor',
                        //layout: 'accordion',
                        layoutConfig: {
                            animate: true
                        },
                        items: [{
                            contentEl: 'west',
                            title: 'Printing Parameters',
                            collapsible: true,
                            //collapsed: 'true',
                            items: printing,
                            border: false,
                            iconCls: 'nav'
                        }, {
                            title: 'Queries',
                            collapsible: true,
                            //collapsed: 'true',
                            items: queries,
                            border: false,
                            iconCls: 'nav'
                        }]
                    }, {
                        region: 'center',
                        title: 'Map',
                        contentEl: 'olmap'
                    }]
                });
            });
        </script>
    </head>
    <body>
        <div id="west">
        </div>
        <div id="north">
        	<img src="logo2.png" alt="mapping 38 years of excavation">

        </div>
        <div id="olmap">
        </div>
    </body>
</html>
